{% extends 'base.html' %}

{% block title %}Bad Request | TaskFlow{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8 text-center">
            <h1 class="display-1 text-warning">400</h1>
            <h2 class="mb-4">Bad Request</h2>
            <p class="lead">Your browser sent a request that this server could not understand.</p>
            <p>Please check your request and try again.</p>
            <div class="mt-4">
                <a href="{% url 'home' %}" class="btn btn-primary">
                    <i class="fas fa-home me-2"></i>Return to Homepage
                </a>
                <button onclick="history.back()" class="btn btn-outline-secondary ms-2">
                    <i class="fas fa-arrow-left me-2"></i>Go Back
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    body {
        background-color: #f8f9fa;
    }
    .display-1 {
        font-size: 8rem;
        font-weight: 700;
    }
</style>
{% endblock %}